<template>
	<view class="content poRel">
		<!-- <view class="wid100 bacFFF">
			<view class="wid90 hei100 mar dis foSi30 fowe600" style="height: 86rpx;justify-content: space-around;">
				<view class="dis disAl hei80" @click="xuanClick(0)"
					:style="xuan == 0?'border-bottom: 6rpx solid #00AD27;color: #00AD27;':'border-bottom: 6rpx solid #fff;color: #585858;'">
					项目升级</view>
				<view class="dis disAl hei80" @click="xuanClick(1)"
					:style="xuan == 1?'border-bottom: 6rpx solid #00AD27;color: #00AD27;':'border-bottom: 6rpx solid #fff;color: #585858;'">
					项目加钟</view>
			</view>
		</view> -->
		<!-- <view class="wid100 bacFFF">
			<view class="wid90 hei100 mar dis disJuC foSi30 fowe600" style="height: 86rpx;">
				<view class="dis disAl hei80" @click="xuanClick(1)"
					:style="xuan == 1?'border-bottom: 6rpx solid #00AD27;color: #00AD27;':'border-bottom: 6rpx solid #fff;color: #585858;'">
					项目加钟</view>
			</view>
		</view> -->
		<scroll-view style="height: calc(100vh);" class="wid100" scroll-y="true" @scrolltolower="lower">
			<view style="height: 1rpx;"></view>
			<wsj v-if="list.length == 0 && xuan == 0" zs='0'></wsj>
			<block v-if="xuan == 0" v-for="(item,index) in list" :key="index">
				<view class="wid90 mar bacFFF mar-top30 borRad20" @click="xiangmuClick(index)">
					<view class="wid90 mar">
						<view class="dis disAl foSi25" style="height: 74rpx;color: #5B5B5B;">将<span
						 :style="'color: '+theme.seco_color+';'">中式推拿</span>升级为以下项目</view>
						<view class="xia"></view>
						<view class="dis disAl" style="padding: 30rpx 0;">
							<view class="dis disAl" style="width: 35%;">
								<view v-if="xiangmu == index" class="dis disAl disJuC borRad50" :style="'border: 1rpx solid '+theme.seco_color+';'"
									style="width: 26rpx;height: 26rpx;">
									<view class="borRad50" :style="'background-color: '+theme.seco_color+';'"
										style="width: 14rpx;height: 14rpx;"></view>
								</view>
								<view v-if="xiangmu != index" class="dis disAl disJuC borRad50"
									style="width: 26rpx;height: 26rpx;border: 1rpx solid #818181;"></view>
								<image src="../../static/tu4.png" class="borRad10 mar-left20"
									style="width: 142rpx;height: 142rpx;"></image>
							</view>
							<view style="width: 65%;">
								<view class="dis disAl disJuB">
									<view class="foSi30 fowe600" style="line-height: 40rpx;">中式推拿</view>
									<view class="foSi20" style="color: #737373;">700人已预约</view>
								</view>
								<view class="dis">
									<view class="foSi20 coFFF tim1 mar-top20" :style="'background: '+theme.seco_color+';'">80分钟</view>
								</view>
								<view class="dis disAl disJuB mar-top20">
									<view class="foSi25 fowe600" style="color: #FF0000;">¥398.00</view>
									<view class="foSi20">需补差价<span style="color: #FF0000;">¥100.00</span></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<view v-if="xuan == 1" class="wid90 mar bacFFF mar-top30 borRad20">
				<view class="wid90 mar">
					<view class="dis disAl foSi25" style="height: 74rpx;color: #5B5B5B;">选择加钟项目</view>
					<block v-for="(item,index) in list" :key="index">
						<view class="xia"></view>
						<view class="dis disAl" style="padding: 30rpx 0;">
							<view class="dis disAl" style="width: 27%;">
								<image :src="item.cover_img" class="borRad10" style="width: 142rpx;height: 142rpx;">
								</image>
							</view>
							<view style="width: 73%;">
								<view class="dis disAl disJuB">
									<view class="foSi30 fowe600" style="line-height: 40rpx;">{{item.name}}</view>
									<view class="foSi20" style="color: #737373;">{{item.virtual_sales}}人已预约</view>
								</view>
								<view class="dis">
									<view class="foSi20 coFFF tim1 mar-top20" :style="'background: '+theme.seco_color+';'">{{item.duration}}分钟</view>
								</view>
								<view class="dis disAl disJuB mar-top20">
									<view class="foSi25 fowe600" style="color: #FF0000;">¥{{item.price}}</view>
									<!-- <view class="dis disAl ">
										<image src="../../static/jian.png" @click="jian()" style="width: 30rpx;height: 30rpx;">
										</image>
										<view class="dis disAl disJuC foSi25" style="width: 64rpx;">{{quantity}}</view>
										<image src="../../static/jia.png" @click="jia()" style="width: 30rpx;height: 30rpx;">
										</image>
									</view> -->
									<view class="dis disAl disJuC coFFF borRad20 butt2" :style="'background-color: '+theme.seco_color+';'"
									 @click="open(index)">去下单
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
			<view style="height: 140rpx;"></view>
		</scroll-view>
		<!-- <view class="poFix wid100 dis disAl disJuC bacFFF" style="height: 124rpx;border-top: 1rpx solid #878787;bottom: 0;">
			<view class="wid90 mar dis disAl disJuB">
				<view class="dis disAl disJuC foSi30 fowe800 borRad40" @click="fanhui()"
					style="width: 300rpx;height: 85rpx;border: 1rpx solid #BFBFBF;">暂不升级/加钟</view>
				<view class="dis disAl disJuC foSi30 fowe800 borRad40 coFFF" 
					style="width: 300rpx;height: 85rpx;background: #00C82D;">下单</view>
			</view>
		</view> -->
		<uni-popup ref="popup" type="bottom">
			<view class="borRad20 bacFFF wid100" style="padding: 30rpx 0;border-radius: 20rpx 0 20rpx 0;">
				<view class="wid90 mar">
					<view class="dis disAl disJuB">
						<view class="fowe800 foSi30">现金支付</view>
						<view @click="guanbi()">
							<uni-icons type="closeempty" class="close" size="20"></uni-icons>
						</view>
					</view>
					<view class="borRad20 mar-top30" style="background-color: #EEEEEE;" 
					:style="pay_type == 2?'color: '+theme.main_color+';':''" @click="pay_type = 2">
						<view class="wid90 mar dis disAl hei86">
							<image src="../../static/yuebao.png" style="width: 35rpx;height: 39rpx;"></image>
							<view class="foSi30 fowe600 mar-left20">账户余额</view>
							<view v-if="userinfo" class="foSi22 mar-left20" style="color: #737373;">余额{{userinfo.money || 0.00}}元</view>
						</view>
					</view>
					<view class="borRad20 mar-top30" style="background-color: #EEEEEE;" 
					:style="pay_type == 1?'color: '+theme.main_color+';':''" @click="pay_type = 1">
						<view class="wid90 mar dis disAl hei86">
							<image src="../../static/weixinzhifu.png" style="width: 38rpx;height: 31rpx;"></image>
							<view class="foSi30 fowe600 mar-left20">微信支付</view>
						</view>
					</view>
					<!-- #ifdef APP -->
					<view class="borRad20 mar-top20" style="background-color: #EEEEEE;" 
						:style="pay_type == 3?'color: '+theme.main_color+';':''" @click="pay_type = 3">
						<view class="wid90 mar dis disAl hei86">
							<image src="../../static/weixinzhifu.png" style="width: 38rpx;height: 31rpx;"></image>
							<view class="foSi30 fowe600 mar-left20">支付宝支付</view>
						</view>
					</view>
					<!-- #endif -->
					
					<view class="mar-top40 hei80 borRad40 dis disAl disJuC coFFF mar foSi30" @click="xiadan()"
					:style="'background-color: '+theme.main_color+';'">下单</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// #ifdef H5
	var jweixin = require('jweixin-module');
	// #endif
	
	import wsj from '../common/w_sj.vue'
	export default {
		components: {
			wsj
		},
		data() {
			return {
				url: this.global.url,
				xiangmu: 0,
				xuan: 1,
				id: '',
				service_id: '',
				tech_id: '',
				last_page: 0,
				page: 1,
				quantity: 1,
				list: [],
				pay_type: 1,
				userinfo: null,
				biaoji: null,
				theme: null
			}
		},
		onLoad(option) {
			this.theme = uni.getStorageSync('theme')
			this.id = option.id
			this.tech_id = option.tech_id
			this.service_id = option.service_id
			this.getList()
			this.getUser()
		},
		methods: {
			open(index) {
				this.biaoji = index
				this.$refs.popup.open()
			},
			guanbi(){
				this.$refs.popup.close();
			},
			getUser() {
				var that = this
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/user/userinfo',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						'token': uni.getStorageSync('token')
					},
					data: {},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.userinfo = result.data
						} else {
							that.userinfo = ''
							uni.showToast({
								title: result.msg,
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			xiadan() {
				var that = this;
				that.guanbi()
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/order/creat_order',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						tech_id: that.tech_id,
						service_id: that.service_id,
						pay_type: that.pay_type,
						service_num: 1,
						order_id: that.list[that.biaoji].id,
						ordertype: 2
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							if (that.pay_type == 1) {
								console.log(result);
								jweixin.config({
									debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
									appId: result.data.appId, // 必填，公众号的唯一标识
									timestamp: result.data.timeStamp, // 必填，生成签名的时间戳
									nonceStr: result.data.nonceStr, // 必填，生成签名的随机串
									signature: result.data.paySign, // 必填，签名
									jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
								})
								jweixin.ready(function() {
									jweixin.chooseWXPay({
										appId: result.data.appId,
										package: result.data.package, //
										timestamp: result.data.timeStamp, // 时间戳
										nonceStr: result.data.nonceStr, // 随机数
										signType: result.data.signType,
										paySign: result.data.paySign, // 签名
										success: function() {
											// 支付成功
											uni.showModal({
												title: '提示',
												content: '支付成功',
												showCancel: false,
												success: function(res) {
													if (res.confirm) {
														uni.navigateBack(1)
													}
												}
											})
										},
										cancel: function() {
											// 支付失败
											console.log(res)
											uni.showToast({
												title: '取消支付',
												icon: 'none',
												duration: 2000
											})
										},
										fail: function() {
											// 支付失败
											console.log(res)
											uni.showToast({
												title: '支付失败',
												icon: 'none',
												duration: 2000
											})
										}
									})
								})
							} else {
								// 支付成功
								uni.showModal({
									title: '提示',
									content: '支付成功',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											uni.navigateBack(1)
										}
									}
								})
							}
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					}
				})
			},
			xuanClick(index) {
				if (this.xuan != index) {
					this.xuan = index
				}
			},
			xiangmuClick(index) {
				if (this.xiangmu != index) {
					this.xiangmu = index
				}
			},
			lower(e) {
				if (this.last_page > this.page) {
					this.page++
					this.getList()
				}
			},
			getList() {
				var that = this;
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/service/clock_list',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						order_id: that.id
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.list = result.data
						} else {
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							})
						}
					}
				})
			},
			jia() {
				this.quantity = this.quantity + 1
			},
			jian() {
				if (this.quantity > 1) {
					this.quantity = this.quantity - 1
				}
			},
			fanhui() {
				uni.navigateBack(1)
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F3F1F1;
	}

	.xia {
		height: 1rpx;
		background-color: #E5E5E5;
	}

	.tim1 {
		padding: 6rpx 13rpx;
		border-radius: 8rpx;
	}

	.butt1 {
		width: 120rpx;
		height: 40rpx;
		color: #414040;
		border: 1rpx solid #414141;
		border-radius: 8rpx;
	}

	.butt2 {
		width: 135rpx;
		height: 55rpx;
		border-radius: 10rpx;
	}
</style>